<div>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <span (click)="onClick(node)">{{node.name}}</span>
  </mat-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <div class="mat-tree-node">
      <button (click)="onToggle(node)" mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'Toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      <span (click)="onClick(node)">{{node.name}}</span>
    </div>
    <!-- There is inline padding applied to this div using styles.
        This padding value depends on the mat-icon-button width.  -->
    <div [class.example-tree-invisible]="collapaseNodes.includes(node.id)"
        role="group">
      <ng-container matTreeNodeOutlet></ng-container>
      <div matTreeNodeOutlet></div>
  </div>
</mat-nested-tree-node>
</mat-tree>
</div>
